<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增用户')"/>
    <th:block th:include="include :: select2-css"/>
</head>
<body>
<div class="main-content">
    <form id="form-task-edit" class="form-horizontal" th:object="${task}">
        <input id="taskId" type="hidden" name="taskId" th:field="*{taskId}"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-sm-2 control-label"><span style="color: red; ">*</span>任务标题：</label>
                    <div class="col-sm-10">
                        <input id="taskTitle" name="taskTitle" placeholder="请输入任务标题" class="form-control" type="text"
                               maxlength="30" th:field="*{taskTitle}"
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">部门名称：</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="dept" name="crew_department" onchange="deptChange()">
                            <option th:selected="${dept.deptName eq task.executorCrew.crewDepartment}"
                                    th:each="dept:${depts}" th:value="${dept.deptName}">[[${dept.deptName}]]
                            </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">执行人员：</label>
                    <div class="col-sm-8">
                        <select class="form-control" id="crew" name="executorId">
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">开始日期：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input id="taskStartTime" type="datetime-local" class="form-control" step="1"
                                   name="taskStartTime"
                                   th:value="${#dates.format(task.taskStartTime,'yyyy-MM-dd')}+'T'+${#dates.format(task.taskStartTime,'HH:mm:ss')}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <label class="col-sm-4 control-label">截止日期：</label>
                    <div class="col-sm-8">
                        <div class="input-group date">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input id="taskEndTime" type="datetime-local" class="form-control" step="1"
                                   name="taskEndTime"
                                   th:value="${#dates.format(task.taskEndTime,'yyyy-MM-dd')}+'T'+${#dates.format(task.taskEndTime,'HH:mm:ss')}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group draggable">
            <label class="col-sm-2 control-label">紧急程度：
            </label>

            <div class="col-sm-10">
                <label class="radio-box"><input type="radio" value="普通" id="optionsRadios1"
                                                name="taskPriority" th:field="*{taskPriority}">普通</label>
                <label class="radio-box"><input type="radio" value="紧急" id="optionsRadios2"
                                                name="taskPriority" th:field="*{taskPriority}">紧急</label>
                <label class="radio-box"><input type="radio" value="非常紧急" id="optionsRadios3"
                                                name="taskPriority" th:field="*{taskPriority}">非常紧急</label>
            </div>
        </div>
        <h4 class="form-header h4">其他信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    <label class="col-xs-2 control-label">任务内容：</label>
                    <div class="col-xs-10">
                        <textarea name="taskContent" maxlength="500" class="form-control" rows="3"
                                  th:field="*{taskContent}"></textarea>
                    </div>
                </div>
            </div>
        </div>
<!--            <img th:src="@{(${task.taskFile})}">-->
    </form>
</div>

<div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存
        </button>&nbsp;
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭
        </button>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script>
    var prefix = ctx + "hcy/task/taskmanager";

    $("#form-task-edit").validate({
        onkeyup: false,
        rules: {
            taskTitle: {
                minlength: 2,
                maxlength: 20,
                remote: {
                    url: prefix + "/checkTaskTitleUnique",
                    type: "post",
                    dataType: "json",
                    data: {
                        "taskId": function () {
                            return $("input[name='taskId']").val();
                        },
                        "taskTitle": function () {
                            return $.common.trim($("#taskTitle").val());
                        }
                    },
                    dataFilter: function (data, type) {
                        return $.validate.unique(data);
                    }
                }
            }
        },
        messages: {
            "taskTitle": {
                remote: "任务标题已经存在"
            }
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var data = $("#form-task-edit").serializeArray();
            $.operate.saveTab(prefix + "/edit", data);
        }
    }

    // select二级菜单联动
    $(function () {
        deptChange();
    });

    function deptChange() {
        var deptName = $("#dept").val();
        $("#crew").empty();
        $.post(prefix + "/crewList", {"deptName": deptName}, function (data) {
            if (data != "") {
                var dataArr = eval(data);
                for (var i in dataArr) {
                    $("#crew").append("<option value='" + dataArr[i].crewId + "'>" + dataArr[i].crewName + "</option>");
                }
            }
        });
    }


</script>
</body>
</html>